import { Wrapper } from './FileBlob.styled'

/**
  new FormData()
  formdata.append
 */

const url     = 'http://localhost:3000/upload';
const method  = 'post';
const headers = {
  // "Content-Type": 'multipart/form-data',
  // "Content-Type": 'application/json',
  "Accept": 'application/json',
}
export const Demo = ()=> {
  const upload = (payload: FormData) => {
    console.log('########## upload', new Date())
    const option = {
      method,
      headers,
      body: payload,
    }
    fetch(url, option)
    .then((response) => {
      console.log(response)
      return response.json()
    })
    .then((reply:any) => {
      console.log(reply)
    })
  }
  const onOpenFile = async () => {
    const [fHandle] = await (window as any).showOpenFilePicker();
    console.log(fHandle)
    if (fHandle.kind === 'file') {
      const file = await fHandle.getFile()
      console.log(file)

      const formdata = new FormData();
      formdata.append('action', 'upload');
      formdata.append('target', 'whocare');
      formdata.append('file', file, file.name);
      upload(formdata)
      // upload()
    }
  }
  return (
    <Wrapper>
      <h1>File Upload</h1>
      <button onClick={onOpenFile}>file picker</button>
    </Wrapper>
  )
}
